<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            background: darkcyan;
            position: fixed;
        }
        .box2{
            background: darkgoldenrod;
            position: relative;
            position: absolute;
            /* left: 0; */
            /* top: 0; */
            right: 0;
            bottom: 0;
            /* left: 50px; */
            /* top: 50px; */
        }
        .box3{
            background: darkgray;
            width: 130px;
            height: 130px;
        }
        .box4{
            height: 3000px;
            background: darkgreen;
        }
    </style>
</head>
<body>
    <!-- 
        1. 场景:当多个元素发生重叠时
        2. 定位:
            position:absolute       绝对定位
                    :relative       相对定位
                    :fixed          固定定位
                    :static         默认,静态(没有定位)
        3. 绝对定位
            位置:不保留原来的位置
            原点:基于第一页的四个角落
        4. 相对定位
            位置:保留原来的位置
            原点:基于原来位置的四个角落
        5. 固定定位
            位置:不保留原来的位置
            原点:基于当前可视窗口的四个角落
     -->
     <div class="box box1"></div>
     <div class="box box2"></div>
     <div class="box box3"></div>
     <div class="box4"></div>
</body>
</html>